<template>
  <view class="goods-detail" v-if="info.id">
    <image src="@/static/back-icon.png" mode="aspectFill" class="base-back" @click="handleBack()"></image>
    <swiper class="detail-ad" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="item in info.mediaList" :key="item.url">
        <image class="item-img" :src="getMedia(item.url)" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="detail-main">
      <view class="main-header">
        <span style="font-size: 28rpx;">¥</span> {{info.price}}
        <span class="header-origin">¥{{info.originalPrice}}</span>
        <view class="header-sub">已售{{info.saleNumber}}</view>
      </view>
      <view class="main-store" @click="handleGoodsDetail()">
        <view class="store-header">
          <h2>{{info.title}}</h2>
          <view class="box-flex">
            <view class="dot">{{info.subTitle}}</view>
            <!-- <view>共12484个消费评价</view> -->
          </view>
        </view>
        <view class="store-main">
          <image :src="selectStore.logo" mode="aspectFill" class="store-img"></image>
          <view class="store-info">
            <view class="box-flex">
              <view class="info-title">
                <h2>{{selectStore.name}}</h2>
                <div class="info-flex"><image class="img" src="@/static/star.png" mode="aspectFill"></image> {{selectStore.score}}</div>
              </view>
              <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons>
            </view>
            <view class="info-p">
              <view>{{selectStore.address}}</view>
              <view v-if="selectStore.distance">{{selectStore.distance}}</view>
            </view>
          </view>
        </view>
      </view>
      <ScrollTabs :tabs="tabsList" v-model="curTabs" :sticky="false" @onChange="handleChangeTabs(tab,idx)">
        <view class="main-detail _a">
          <view class="detail-card detail-cate" v-if="info.privateParams.length">
            <view class="cate-p" v-for="item in info.privateParams" :key="item.paramsName">
              <view class="p-label">{{item.paramsName}}</view>
              <view class="p-span" v-for="ret in item.paramsValues" :key="ret">{{ret}}</view>
            </view>
          </view>
         <view class="detail-card detail-info" v-if="false">
            <view class="card-title">补充信息</view>
            <view class="info-p">2人，工作日适用，需提前一天预约，更多详情请咨询客服小姐姐。</view>
          </view>
          <view class="detail-card detail-info">
            <view class="card-title">图文详情</view>
            <view class="info-p">详情请咨询客服小姐姐~</view>
            <view class="html" v-html="info.bodyHtml"></view>
          </view>
        </view>
        <view class="main-notice _b" v-if="false">
          <view class="main-title">购买须知</view>
          <view class="notice-list">
            <view class="list-item">
              <view class="box-flex h2"><image src="@/static/time-gray.png" mode="aspectFill"></image> <view class="item-p">适用时间</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">有效时间：购买后90天内有效</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">除外日期：2024-02-09至2024-02-12不可用</view></view>
            </view>
            <view class="list-item">
              <view class="box-flex h2"><image src="@/static/time-gray.png" mode="aspectFill"></image> <view class="item-p">预约规则</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">请您提前2小时预约</view></view>
            </view>
            <view class="list-item">
              <view class="box-flex h2"><image src="@/static/time-gray.png" mode="aspectFill"></image> <view class="item-p">适用人数</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">有效时间：购买后90天内有效</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">除外日期：2024-02-09至2024-02-12不可用</view></view>
            </view>
            <view class="list-item">
              <view class="box-flex h2"><image src="@/static/time-gray.png" mode="aspectFill"></image> <view class="item-p">适用时间</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">有效时间：购买后90天内有效</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">除外日期：2024-02-09至2024-02-12不可用</view></view>
            </view>
            <view class="list-item">
              <view class="box-flex h2"><image src="@/static/time-gray.png" mode="aspectFill"></image> <view class="item-p">其它规则</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">有效时间：购买后90天内有效</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">除外日期：2024-02-09至2024-02-12不可用</view></view>
            </view>
            <view class="list-item">
              <view class="box-flex h2"><image src="@/static/time-gray.png" mode="aspectFill"></image> <view class="item-p">温馨提示</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">有效时间：购买后90天内有效</view></view>
              <view class="box-flex"><image src="@/static/circle-gray.png" mode="aspectFill"></image> <view class="item-p">除外日期：2024-02-09至2024-02-12不可用</view></view>
            </view>
          </view>
        </view>
       <view class="main-evaluation _c">
          <view class="main-title">精选评价({{params.total||0}}) <uni-icons @click="handleMoreComment()" style="font-weight: 400;" type="right" size="14" color="#B0B0B0"></uni-icons></view>
          <view class="detail-card" v-if="commentList.length">
            <SinyuEvaluation :list="commentList" @onMore="handleMoreComment()" :hasMore="true"></SinyuEvaluation>
          </view>
          <view class="var-empty" v-else>暂无评论</view>
        </view>
      </ScrollTabs>
    </view>
    <view class="detail-footer">
<!--      <view class="footer-item" @click="handleGoodsDetail()">
        <image src="@/static/store-icon.png" class="item-img" mode="aspectFill"></image>
        门店
      </view>
      <view class="footer-item">
        <image src="@/static/collect.png" class="item-img" mode="aspectFill"></image>
        收藏
      </view> -->
      <button open-type="share" class="footer-item">
        <image src="@/static/share-icon.png" class="item-img" mode="aspectFill"></image>
        分享
      </button>
      <view class="footer-button" @click="handleSubmit()"><span style="font-size: 24rpx;">¥</span> <span class="strong">{{info.price}}</span>抢购</view>
    </view>
    <uni-popup ref="orderPopup" type="bottom">
      <view class="detail-order">
        <view class="order-header">
          <image :src="getMedia(info.mediaList[0].url)" mode="aspectFill" class="header-img"></image>
          <view class="header-info">
            <view class="info-title">
              <h2 class="dot2">{{info.title}}</h2>
              <uni-icons type="closeempty" @click="$refs.orderPopup.close()"></uni-icons>
            </view>
            <view class="info-footer">
              <view>¥{{info.price}}</view>
              <view class="inputNumber">
                <image src="@/static/cut.png" @click="handleNumCut()" mode="aspectFill" class="img"></image>
                <view style="margin:0 20rpx">{{inputNumber}}</view>
                <image src="@/static/add.png" @click="handleNumAdd()" mode="aspectFill" class="img"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="order-card">
          <view class="order-item">
            <view class="item-label">商品总价 <span>(共{{inputNumber}}件)</span></view>
            <view class="item-info" style="font-weight: bold;">¥{{priceMap.productTotalPrice}}</view>
          </view>
          <view class="order-item" v-if="pointInfo" @click="handlePoint()">
            <view class="item-label">
              <view>莲米抵扣</view>
              <view class="sub">总莲米{{pointInfo.sumPoint}}</view>
            </view>
            <view class="item-info" v-if="curPoint.choosePoint">
              <view class="price">-¥{{curPoint.choosePrice}}</view>
            </view>
            <view class="item-info" v-else-if="pointInfo.exceptionCode">
              <view class="coupon-none" v-if="pointInfo.exceptionCode == '210'">今日使用已达上限</view>
              <view class="coupon-none" v-else-if="pointInfo.exceptionCode == '211'">本订单不支持</view>
              <view class="coupon-none" v-else-if="pointInfo.exceptionCode == '212'">{{`共${pointInfo.sumPoint}积分，满${pointInfo.offsetPointMin}可用`}}</view>
              <view class="coupon-none" v-else>无可用</view>
            </view>
            <view class="item-info box-flex" v-else-if="!pointInfo.choosePointList.length">
              <view class="coupon-none">无可用</view>
              <uni-icons type="right" color="#b0b0b0" size="14"></uni-icons>
            </view>
            <view class="item-info" v-else>去选择</view>
          </view>
          <uni-popup ref="pointPopup" type="bottom">
            <view class="point-popup">
              <view class="popup-header">
                <view></view>
                <view class="h2">积分</view>
                <uni-icons @click="$refs.pointPopup.close()" type="closeempty" size="18" color="#6D6D6D"></uni-icons>
              </view>
              <view class="popup-account">
                <view class="account-info">账户积分：<span style="font-weight: bold;">{{pointInfo.sumPoint || 0}}</span></view>
                <view class="account-span" v-if="curPoint.choosePrice">本单已减¥<span class="sub-theme">{{curPoint.choosePrice}}</span></view>
                <view class="account-span" v-else>本单暂不使用积分</view>
              </view>
              <view class="popup-main">
                <view class="main-item" v-for="(item,idx) in pointInfo.choosePointList" :key="idx" @click="handleSelectPoint(item)">
                  <view class="item-label">抵扣<span class="sub-theme">¥{{item.choosePrice}}</span>使用{{item.choosePoint}}积分</view>
                  <image class="item-img" :src="`../static/${curPoint.choosePoint == item.choosePoint?'status-radio-selected@2x':'status-radio-unselected@2x'}.png`" mode="aspectFill"></image>
                </view>
              </view>
              <view class="popup-footer">
                <view class="button var-button" @click="$refs.pointPopup.close()">确定</view>
              </view>
            </view>
          </uni-popup>
          <view class="order-item">
            <view class="item-label">优惠券</view>
            <view class="item-info box-flex">
              <view class="coupon" v-if="false">1张可用</view>
              <view class="coupon-none" v-else>无可用</view>
              <uni-icons type="right" color="#b0b0b0" size="14"></uni-icons>
            </view>
          </view>
          <view class="order-item">
            <view class="item-label"></view>
            <view class="item-info">小计 <span class="strong">¥{{priceMap.totalPrice}}</span></view>
          </view>
        </view>
        <view class="order-card">
          <view class="order-item">
            <view class="item-label">意向门店</view>
            <view class="item-info">{{selectStore.name}}</view>
          </view>
          <view class="order-item">
            <view class="item-label">手机号码</view>
            <view class="item-info">{{user.mobile}}</view>
          </view>
        </view>
      </view>
      <view class="popup-order-footer">
        <view class="footer-info">合计¥{{priceMap.totalPrice - (curPoint.choosePrice*1 || 0)}} <span class="theme-color">优惠¥{{priceMap.discountTotalPrice}}</span></view>
        <view class="footer-button" @click="handlePay()">立即支付 <span style="margin: 0 4rpx;font-size: 24rpx">¥</span> <span class="strong">{{priceMap.totalPrice - (curPoint.choosePrice*1 || 0)}}</span></view>
      </view>
    </uni-popup>
    <uni-popup ref="couponPopup" type="bottom">
      <view class="coupon-popup">
        <view class="popup-header">
          <uni-icons type="closeempty" size="20" color="#B0B0B0" @click="$refs.couponPopup.close()"></uni-icons>
          <h2>选择牙荷优惠券</h2>
          <view></view>
        </view>
        <view class="popup-main not-bar">
          <view class="main-item" v-for="(item,idx) in 3" :key="idx">
            <view class="item-price">
              <view class="strong">99</view> 元
            </view>
            <view class="item-info">
              <view class="h2">洗牙券 <span class="span">无门槛券</span></view>
              <view class="p">2024-10-10到期</view>
              <view class="span">仅限每荷诊所使用</view>
            </view>
            <radio style="margin-left: 10rpx;" value="" />
          </view>
        </view>
        <view class="popup-footer">
          <view class="button" @click="handleCoupon()">确认</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import ScrollTabs from '@/components/scroll-tabs/scroll-tabs/scroll-tabs.vue'
  import SinyuEvaluation from '@/components/SinyuEvaluation.vue';
  export default {
    components:{ScrollTabs,SinyuEvaluation},
    data() {
      return {
        tabsList:[
          {label:'品项详情',scroll_id:'_a'},
          // {label:'购买须知',scroll_id:'_b'},
          {label:'网友评价',scroll_id:'_c'},
        ],
        params:{
          page:1,
          pageSize:5
        },
        curTabs:'',
        info:{},
        selectStore:uni.getStorageSync('selectStore'),
        user:uni.getStorageSync('user'),
        priceMap:{},
        inputNumber:1,
        isPoint:false,
        pointInfo:{},
        curPoint:{},
        commentList:[]
      };
    },
    onLoad(ops) {
      uni.showLoading({
        title:'加载中...'
      })
      this.$get(`/product/product/getDetail/${ops.id}`,'','1').then(res=>{
        if(res.code == '1'){
          this.info = {
            ...res.content,
            bodyHtml:res.content.bodyHtml && res.content.bodyHtml.replace(/<img/gi,'<img style="max-width:100%;display: block;"')
          }
          this.$post(`/wallet/api/usablePoint/getUseDeductionPointApi`,{
            sumPrice:res.content.price,
            simplePrice:[res.content.price]
          }).then(ret=>{
            if(ret.code == '1'){
              this.pointInfo = ret.content
            }
          })
        }
      })
      this._getCommentList({
        topicId:ops.id,selection:1
      })
    },
    methods:{
      handleBack(){
        uni.navigateBack({
          fail:e=>{
            uni.reLaunch({
              url:'/pages/index/index'
            })
          }
        })
      },
      handleChangeTabs(tab,idx){
        this.curTabs = idx
      },
      handlePoint(){  /// 打开选择积分
        if(this.pointInfo.choosePointList.length){
          this.$refs.pointPopup.open()
        }
      },
      handleGoodsDetail(){  //  跳店铺详情
        uni.navigateTo({
          url:`/mainPackage/shops-detail?id=${this.selectStore.id}`
        })
      },
      handleMoreComment(){
        uni.navigateTo({
          url:`/mainPackage/all-evaluation?topicId=${this.info.id}&appId=yh_service_product`
        })
      },
      handleNumCut(){  ///  减减
        if(this.inputNumber == 1){
          return;
        }
        this.inputNumber--
        this.handleCalcPrice()
      },
      handleNumAdd(){  ///  加加
        this.inputNumber++
        this.handleCalcPrice()
      },
      handleCalcPrice(){  // 计算价格
        uni.showLoading({
          title:'计算中...'
        })
        const data = {
          productItemRequestList:[{
            num:this.inputNumber,
            productReleaseId:this.info.id,
            merchantId:this.info.merchantId,
            orgName:this.info.orgName,
            orgId:this.info.storeId,
            productVariantReleaseId:this.info.productVariantReleaseId
          }]
        }
        this.$post(`/product/v1/order/confirmInfo/listOrderInfo`,data,'1').then(res=>{
          if(res.code == '1'){
            this.priceMap = res.content
          }
        })
      },
      handleSelectPoint(e){   // 选择积分
        if (e.choosePoint == this.curPoint.choosePoint) {
          this.curPoint = {}
        } else {
          this.curPoint = e
        }
      },
      handleSubmit(){
        uni.verifyLogin();
        this.handleCalcPrice();this.$refs.orderPopup.open();
      },
      handlePay(){  ///  点击支付
        const data = {
          addressRequest:{addressId:'0'},
          couponList:[],
          currency:'4217',
          distributionWay:'3',
          mobile:this.user.mobile,
          pointsList:[],
          productItemRequestList:[{
            num:this.inputNumber,
            productReleaseId:this.info.id,
            merchantId:this.info.merchantId,
            orgName:this.info.orgName,
            orgId:this.info.storeId,
            productVariantReleaseId:this.info.productVariantReleaseId
          }],
          sourceName:'wechat',
          totalPrice:this.priceMap.totalPrice
        }
        if(this.curPoint.choosePoint){
          Object.assign(data,{
            pointsList: [{
              discountAmount: this.curPoint.choosePrice,
              usePoints: this.curPoint.choosePoint,
              orgId:this.info.storeId,
            }]
          })
        }
        uni.showLoading({
          title:'加载中...'
        })
        this.$post(`/product/v1/product/product-car-order/createOrder`,data,'1').then(async res=>{
          if(res.code == '1'){
            const values = {
              appId:this.$mpAppid,
              openId:await uni.getOpenId(),
              orderId:res.content.orderIdList[0]
            }
            this.$post('/order/users/orders/pay',values).then(ret=>{
              if(ret.code == '1'){
                let {content} = ret
                uni.requestPayment({
                  timeStamp: content.timeStamp,
                  nonceStr: content.nonceStr,
                  package: content.package,
                  signType: content.signType,
                  paySign: content.paySign,
                  success:res=>{
                    uni.navigateTo({
                      url:`/pages/other/pay-result?id=${values.orderId}`
                    })
                  },
                  fail:err=>{
                    this.$toast('支付失败','none')
                  }
                })
              }else{
                this.$toast(ret.message,'none')
              }
            })
          }else{
            this.$toast(res.message,'none')
          }
        })
      },
      ///   network
      _getCommentList(value){
        const data = {
          appId:'yh_service_product',
          ...this.params,
          ...value
        }
        this.$get('/social/yahe/comment/pageList',data,'1').then(res=>{
          if(res.code == '1'){
            this.params.total = res.content.pagination.totalCount
            this.commentList = [...this.commentList,...res.content.list]
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.goods-detail{
  position: relative;
  padding-bottom: 140rpx;
  .base-back{
    position: fixed;
    left: 20rpx;
    width: 56rpx;
    height: 56rpx;
    z-index: 1;
    top: 50rpx;
    /*#ifdef MP-WEIXIN*/
    top: 100rpx;
    /*#endif*/
  }
  .detail-ad{
    width: 100vw;
    height: 430rpx;
    .item-img{
      width: 100%;
      height: 100%;
    }
  }
  .detail-main{
    margin-top: -20rpx;
    padding: 22rpx 24rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: var(--page-bg);
    position: relative;
    .main-title{
      line-height: 88rpx;
      color: var(--title-color);
      font-weight: bold;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .main-header{
      display: flex;
      align-items: flex-end;
      color: var(--sub-theme);
      font-weight: bold;
      font-size: 48rpx;
      .header-origin{
        font-size: 24rpx;
        color: var(--sub-title);
        margin-left: 14rpx;
        margin-right: auto;
        text-decoration: line-through;
      }
      .header-sub{
        color: var(--sub-title);
        font-size: 20rpx;
      }
    }
    
    .main-store{
      padding: 24rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-top: 20rpx;
      .store-header{
        margin-bottom: 20rpx;
        padding-bottom: 16rpx;
        border-bottom: 2rpx solid #EFEFEF;
        h2{
          font-size: 36rpx;
          font-weight: bold;
          margin-bottom: 16rpx;
          color: var(--title-color);
        }
        .box-flex{
          justify-content: space-between;
          align-items: center;
          font-size: 20rpx;
          color: #6D6D6D;
        }
      }
      .store-main{
        display: flex;
        align-items: center;
      }
      .store-img{
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 20rpx;
      }
      .store-info{
        flex: 1;
        .box-flex{justify-content: space-between;}
        .info-title{
          font-size: 26rpx;
          color: var(--title-color);
          font-weight: bold;
          h2{margin-bottom: 12rpx;}
          .info-flex{
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-weight: 400;
            color: var(--sub-theme);
          }
          .img{
            width: 24rpx;
            height: 24rpx;
            display: block;
            margin-right: 4rpx;
          }
        }
        .info-p{
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 22rpx;
          color: var(--sub-title);
          margin-top: 10rpx;
        }
      }
    }  ///  main-store end
    
    .detail-card{
      padding: 24rpx;
      background: #fff;
      border-radius: 20rpx;
      .card-title{
        font-size: 28rpx;
        font-weight: bold;
      }
    }
    .main-detail{
      .detail-cate{
        margin-bottom: 20rpx;
        .cate-p{
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #6D6D6D;
          margin-bottom: 20rpx;
          &:last-child{
            margin-bottom: 0;
          }
          .p-label{
            color: var(--title-color);
            margin-right: 20rpx;
          }
          .p-span{
            flex: 1;
            display: flex;
            align-items: center;
            span{
              font-size: 22rpx;
              color: var(--sub-title);
              margin-left: auto;
            }
          }
        }
      }
      .detail-info{
        margin-top: 20rpx;
        .info-p{
          font-size: 24rpx;
          color: #6D6D6D;
          line-height: 40rpx;
        }
        .html{
          margin-top: 20rpx;
        }
      }
      
    }  /// main-detail end
    
    .main-notice{
      .notice-list{
        padding: 24rpx;
        background: #fff;
        border-radius: 20rpx;
        .list-item{
          font-size: 24rpx;
          color: #6D6D6D;
          .h2{
            color: var(--title-color);
            font-weight: bold;
          }
          .box-flex{
            margin-bottom: 20rpx;
            image{
              width: 26rpx;
              height: 26rpx;
              margin-top: 2rpx;
            }
            .item-p{
              margin-left: 4rpx;
            }
            &:last-child .item-p{
              padding-bottom: 20rpx;
              border-bottom: 2rpx solid #EFEFEF;
            }
          }
        }
      }
    }
    
  }  ///  detail-main end
  
  .detail-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12rpx 24rpx;
    display: flex;
    align-items: center;
    background: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .footer-item{
      line-height: 1;
      padding: 0;
      margin: 0;
      text-align: center;
      font-size: 20rpx;
      color: var(--title-color);
      margin-right: 48rpx;
      .item-img{
        width: 52rpx;
        height: 52rpx;
        display: block;
      }
    }
    .footer-button{
      flex: 1;
      line-height: 72rpx;
      color: 28rpx;
      background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      text-align: center;
      border-radius: 72rpx;
      color: #fff;
      font-weight: bold;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .strong{
        font-size: 32rpx;
        margin: 0 4rpx;
      }
    }
  }  //  detail-footer end
  
  .detail-order{
    border-radius: 20rpx 20rpx 0 0;
    background: var(--page-bg);
    padding: 24rpx;
    .order-header{
      display: flex;
      margin-bottom: 20rpx;
      .header-img{
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 20rpx;
      }
      .header-info{
        flex: 1;
        .info-title{
          display: flex;
          margin-bottom: 42rpx;
          h2{
            font-size: 28rpx;
            color: var(--title-color);
            margin-right: auto;
          }
        }
        
        .info-footer{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28rpx;
          color: var(--title-color);
          
          .inputNumber{
            display: flex;
            align-items: center;
            .img{
              width: 44rpx;
              height: 44rpx;
            }
          }
        }
      }
    }  // order-header ned
    
    .order-calc{
      padding: 28rpx 24rpx;
      border-radius: 20rpx;
      background: #fff;
      margin: 20rpx 0;
      .box-flex{
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #EFEFEF;
        margin-bottom: 24rpx;
        padding-bottom: 22rpx;
        .calc-title{
          font-size: 28rpx;
          color: var(--title-color);
          span{
            color: #6D6D6D;
            font-size: 24rpx;
          }
        }
        .calc-price{
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      .calc-discount{
        border-bottom: 2rpx solid #EFEFEF;
        margin-bottom: 22rpx;
        .discount-p{
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #6D6D6D;
          margin-bottom: 24rpx;
          .img{
            width: 28rpx;
            height: 28rpx;
            margin-right: 8rpx;
          }
          .p-span{
            color: var(--sub-theme);
            margin-left: auto;
          }
        }
      }
      .calc-footer{
        display: flex;
        justify-content: space-between;
        .footer-price{
          font-size: 28rpx;
          color: var(--title-color);
          .sub-theme{
            font-size: 24rpx;margin: 0 4rpx;
          }
          .strong{
            font-weight: bold;
            color: var(--sub-theme);
          }
        }
      }
    }  //  order-calc end
    
    .order-card{
      padding: 0 24rpx;
      border-radius: 20rpx;
      background: #fff;
      margin-bottom: 20rpx;
    }
    .order-item{
      padding: 28rpx 0;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      border-bottom: 2rpx solid #efefef;
      &:last-child{
        border-bottom: 0;
      }
      .item-label{
        color: var(--title-color);
        margin-right: auto;
        white-space: nowrap;
        span{
          color: #6D6D6D;
          font-size: 24rpx;
        }
      }
      .item-info{
        color: #6D6D6D;
        text-align: right;
      }
      .item-radio{
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-left: 10rpx;
      }
      .price{
        color: var(--sub-theme);
      }
      .sub{
        font-size: 22rpx;
        color: var(--sub-title);
      }
      .coupon{
        line-height: 1;
        background: var(--sub-theme-10);
        color: var(--sub-theme);
        border: 2rpx solid var(--sub-theme);
        font-size: 20rpx;
        padding: 8rpx;
        border-radius: 4rpx;
      }
      .coupon-none{
        color: var(--sub-title);
      }
      .input{
        text-align: right;
        font-size: 28rpx;
        color: #6D6D6D;
        flex: 1;
      }
      .strong{
        font-weight: bold;
        color: var(--sub-theme);
        margin-left: 14rpx;
      }
    }
    
  }  //  detail-order end
  .popup-order-footer{
    background: #fff;
    box-shadow: 0rpx -10rpx 19rpx 0rpx rgba(0,0,0,0.06);
    padding: 16rpx 24rpx;
    .footer-info{
      font-size: 24rpx;
      color: var(--title-color);
      .theme-color{
        margin-left: 16rpx;
      }
    }
    .footer-button{
      line-height: 80rpx;
      background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      color: #fff;
      margin-top: 16rpx;
      text-align: center;
      font-size: 28rpx;
      border-radius: 80rpx;
      .strong{
        font-weight: bold;
        font-size: 32rpx;
      }
    }
  }
  
  .coupon-popup{
    border-radius: 20rpx 20rpx 0 0;
    padding: 24rpx;
    background: #fff;
    .popup-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;
      h2{
        font-size: 28rpx;
        color: var(--title-color);
      }
    }
    .popup-main{
      .main-item{
        display: flex;
        align-items: center;
        background: var(--sub-theme-10);
        border-radius: 20rpx;
        margin: 20rpx 0;
        padding-right: 20rpx;
        .item-price{
          width: 164rpx;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          color: var(--sub-theme);
          font-size: 20rpx;
          .strong{
            font-size: 60rpx;
            font-weight: bold;
          }
        }
      }
      .item-info{
        flex: 1;
        border-left: 2rpx dashed rgba(0,0,0,0.12);
        padding: 32rpx 28rpx;
        margin-right: auto;
        .h2{
          font-size: 26rpx;
          font-weight: bold;
          color: var(--title-color);
          .span{
            line-height: 1;
            font-size: 18rpx;
            color: var(--sub-theme);
            background: var(--sub-theme-10);
            padding: 2rpx 6rpx;
            border-radius: 4rpx;
            margin-left: 8rpx;
          }
        }
        .p{
          color: var(--sub-theme);
          font-size: 22rpx;
          margin: 10rpx 0;
        }
        .span{
          color: var(--sub-title);
          font-size: 20rpx;
        }
      }
    }  //  popup-main end
    .popup-footer{
      margin-top: 24rpx;
      padding: 14rpx 0;
      .button{
        line-height: 72rpx;
        font-size: 28rpx;
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
        text-align: center;
        border-radius: 72rpx;
        color: #fff;
      }
    }
  }  // coupon-popup end
  
  .point-popup{
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding:0 24rpx 24rpx;
    .popup-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 80rpx;
      .h2{
        font-size: 30rpx;
        font-weight: bold;
      }
    }
    .popup-account{
      display: flex;
      border-bottom: 2rpx solid #efefef;
      align-items: center;
      font-size: 24rpx;
      justify-content: space-between;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
    }
    .popup-main{
      max-height: 500rpx;
      overflow-y: auto;
      margin-bottom: 20rpx;
      .main-item{
        line-height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-img{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  } // point-popup end
}
</style>
